<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>节点操纵</title>
  </head>
  <body>
    <!-- 用 js 代码 操纵页面上的 dom 元素
    创建，添加，删除 
  -->
    <div class="box"></div>
    <button class="btn-append">末尾添加</button>
    <button class="btn-prepend">开头添加</button>
    <button class="btn-remove">点我删除自己</button>
    <script>
      document
        .querySelector(".btn-append")
        .addEventListener("click", function () {
          // 1. 创建 dom 元素
          const img = document.createElement("img");
          // 设置属性 否则没效果
          img.src = "./imgs/dog.gif";
          img.style.width = "80px";

          // 2. 添加到页面上
          document.querySelector(".box").append(img);
        });
      document
        .querySelector(".btn-prepend")
        .addEventListener("click", function () {
          // 1. 创建 dom 元素
          const img = document.createElement("img");
          // 设置属性 否则没效果
          img.src = "./imgs/cat.webp";
          img.style.width = "80px";

          // 2. 添加到页面上
          document.querySelector(".box").prepend(img);
        });

      document
        .querySelector(".btn-remove")
        .addEventListener("click", function () {
          // 删除自己
          // this.remove()
          document.querySelector(".box").remove();
        });
    </script>
  </body>
</html>
